<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="state.style">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
const props = defineProps({
  w: {
    type: Number,
    default: 1920
  },
  h: {
    type: Number,
    default: 1080
  }
})

const state = reactive({
  style: {
    width: props.w + 'px',
    height: props.h + 'px',
    transform: 'scale(1) translate(-50%, -50%)'
  },
  onresize: null
})

const Debounce = (fn, t) => {
  const delay = t || 500
  let timer
  return function () {
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn.apply(this, args)
    }, delay)
  }
}
const getScale = () => {
  const w = window.innerWidth / props.w
  const h = window.innerHeight / props.h
  return w < h ? w : h
}
const setScale = () => {
  state.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}


  onMounted(() => {
    setScale()
    state.onresize = Debounce(() => setScale(), 100)
    window.addEventListener('resize', state.onresize)
  })
</script>

<style>
.screen-adapter {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.content-wrap {
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>